<template>
  <div class="second">
    <dv-border-box-11 title="蒙草矿山生态大数据平台">
      <div class="container">
        <div class="left">
          <div class="lefttop">
            <dv-border-box-7>
              <div id="leftTop" style="width:100%;height:100%"></div>
            </dv-border-box-7>
          </div>
          <div class="leftcenter">
            <dv-border-box-7>
              <div class="shall">
                <span>知识分享</span>
              </div>
              <div>
                <el-row style="font-size:24px;line-height:78px">
                  <el-col :span="6" class="fontstyle">
                    <i class="el-icon-s-order"></i>
                  </el-col>
                  <el-col :span="6" class="textstyle">18个</el-col>
                  <el-col :span="6" class="fontstyle">
                    <i class="el-icon-picture"></i>
                  </el-col>
                  <el-col :span="6" class="textstyle">172张</el-col>
                </el-row>
              </div>
            </dv-border-box-7>
          </div>
          <div class="leftbottom">
            <dv-border-box-7>
              <div id="leftbottom" style="width:100%;height:100%">

              </div>
            </dv-border-box-7>
          </div>
        </div>
        <div class="center">
          <div class="centertop" id="centertop">
          </div>
          <div id="centerbottom" class="centerbottom">
            <img src="@/assets/images/1.jpg" alt="" style="height:100%;width:50% ;padding:10px 5px 0 10px">
            <img src="@/assets/images/2.jpg" alt="" style="height:100%;width:50%; padding:10px 10px 0 5px">
          </div>
        </div>
        <div class="right">
          <div class="righttop">
            <dv-border-box-7>
              <div id="righttop" style="width:100%;height:100%"></div>
            </dv-border-box-7>
          </div>
          <div class="rightcenter">
            <dv-border-box-7>
              <div id="rightcenter" style="width:100%;height:100%"></div>
            </dv-border-box-7>
          </div>
          <div class="rightbottom">
            <dv-border-box-7>
              <div id="rightbottom" style="width:100%;height:100%"></div>
            </dv-border-box-7>
          </div>
        </div>
      </div>
    </dv-border-box-11>

  </div>
</template>

<script>
// import echarts from 'echarts';
import * as china from '@/utils/china';



export default {
  data() {
    return {

    }
  },
  components: {

  },
  methods: {
    drawMap() {
      this.$echarts.registerMap('china', china);
      let myChart8 = this.$echarts.init(document.getElementById('leftTop'));
      let myChart9 = this.$echarts.init(document.getElementById('leftbottom'));
      let myChart10 = this.$echarts.init(document.getElementById('righttop'));
      let myChart11 = this.$echarts.init(document.getElementById('rightcenter'));
      let myChart12 = this.$echarts.init(document.getElementById('rightbottom'));
      let myChart13 = this.$echarts.init(document.getElementById('centertop'));


      let option1 = {
        title: {
          text: '某站点用户访问来源',
          subtext: '纯属虚构',
          left: 'center',
          textStyle: {
            color: 'rgb(140,240,240)',
            // textBorderType : 'solid'
            textShadowColor: 'rgb(80,160,170)',
            textShadowBlur: 10
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          textStyle: {
            color: "rgba(239, 231, 231, 1)"
          }
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '搜索引擎' },
              { value: 735, name: '直接访问' },
              { value: 580, name: '邮件营销' },
              { value: 484, name: '联盟广告' },
              { value: 300, name: '视频广告' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      let option2 = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar'
        }]
      };
      let option3 = {
        title: {
          text: '漏斗图',
          subtext: '纯属虚构',
          left: 'left',
          top: 'bottom',
          textStyle: {
            color: 'rgb(140,240,240)',
            // textBorderType : 'solid'
            textShadowColor: 'rgb(80,160,170)',
            textShadowBlur: 10
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}%'
        },
        toolbox: {
          orient: 'vertical',
          top: 'center',
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['展现', '点击', '访问', '咨询', '订单'],
          textStyle: {
            color: "rgba(239, 231, 231, 1)"
          }
        },
        series: [
          {
            name: '漏斗图',
            type: 'funnel',
            width: '40%',
            height: '45%',
            left: '5%',
            top: '50%',
            data: [
              { value: 60, name: '访问' },
              { value: 30, name: '咨询' },
              { value: 10, name: '订单' },
              { value: 80, name: '点击' },
              { value: 100, name: '展现' }
            ]
          },
          {
            name: '金字塔',
            type: 'funnel',
            width: '40%',
            height: '45%',
            left: '5%',
            top: '5%',
            sort: 'ascending',
            data: [
              { value: 60, name: '访问' },
              { value: 30, name: '咨询' },
              { value: 10, name: '订单' },
              { value: 80, name: '点击' },
              { value: 100, name: '展现' }
            ]
          },
          {
            name: '漏斗图',
            type: 'funnel',
            width: '40%',
            height: '45%',
            left: '55%',
            top: '5%',
            label: {
              position: 'left'
            },
            data: [
              { value: 60, name: '访问' },
              { value: 30, name: '咨询' },
              { value: 10, name: '订单' },
              { value: 80, name: '点击' },
              { value: 100, name: '展现' }
            ]
          },
          {
            name: '金字塔',
            type: 'funnel',
            width: '40%',
            height: '45%',
            left: '55%',
            top: '50%',
            sort: 'ascending',
            label: {
              position: 'left'
            },
            data: [
              { value: 60, name: '访问' },
              { value: 30, name: '咨询' },
              { value: 10, name: '订单' },
              { value: 80, name: '点击' },
              { value: 100, name: '展现' }
            ]
          }
        ]
      };
      let option4 = {
        title: {
          text: '世界人口总量',
          subtext: '数据来自网络',
          textStyle: {
            color: 'rgb(140,240,240)',
            // textBorderType : 'solid'
            textShadowColor: 'rgb(80,160,170)',
            textShadowBlur: 10
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['2011年', '2012年'],
          textStyle: {
            color: "rgba(239, 231, 231, 1)"
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
        },
        series: [
          {
            name: '2011年',
            type: 'bar',
            data: [18203, 23489, 29034, 104970, 131744, 630230]
          },
          {
            name: '2012年',
            type: 'bar',
            data: [19325, 23438, 31000, 121594, 134141, 681807]
          }
        ]
      };
      let option5 = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }]
      };
      let option6 = {
        series: [{
          type: 'map',
          map: 'china',
          //  zoom: 1.5,
          itemStyle: {
            normal: {
              borderWidth: 2,//边际线大小
              borderColor: 'rgb(20,120,155)',//边界线颜色
              areaColor: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(147, 235, 248, .1)' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              },//默认区域颜色
              shadowColor: 'rgba(128, 217, 248, 1)',
              // shadowColor: 'rgba(255, 255, 255, 1)',
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 5
            },
            emphasis: {
              show: true,
              areaColor: '#389BB7',//鼠标滑过区域颜色
              label: {
                show: true,
                textStyle: {
                  color: '#fff'
                }
              }
            }
          }
        }],
        
        title: {
          text: '中国轮廓地图',
          top: '3%',
          left: 'center',

          textStyle: {
            fontSize: 20,
            fontWeight: 600,
            color: 'rgb(140,240,240)',
            // textBorderType : 'solid'
            textShadowColor: 'rgb(80,160,170)',
            textShadowBlur: 10
          }
        },
      }

      myChart8.setOption(option1);
      myChart9.setOption(option2);
      myChart10.setOption(option3);
      myChart11.setOption(option4);
      myChart12.setOption(option5);
      myChart13.setOption(option6);
    }
  },
  mounted() {
    this.drawMap()
  },
}
</script>

<style scoped>
.second {
  position: relative;
  width: 100%;
  height: 100%;
  color: #fff;
  background-image: url(../assets/images/bg.png);
}

.container {
  width: 100%;
  height: 100%;
  /* background-image: url(../assets/images/bg.png); */
  /* color: rgb(150, 240, 240); */
}
.left {
  position: absolute;
  width: 25%;
  height: 100%;
  top: 35px;
  left: 20px;
  /* margin-top: 100px; */
  /* background-color: pink; */
  padding-top: 10px;
}
.lefttop {
  height: 42%;
  width: 100%;
}
.leftcenter {
  height: 16%;
  width: 100%;
  padding-top: 10px;
}
.leftbottom {
  height: 36%;
  width: 100%;
  padding-top: 10px;
}
.center {
  position: absolute;
  width: 50%;
  height: 93%;
  top: 44px;
  left: 26%;
  /* background-color: yellow; */
  overflow: hidden;
}
.right {
  position: absolute;
  top: 45px;
  left: 76%;
  width: 23%;
  height: 93%;
  /* background-color: aqua; */
}
.righttop {
  width: 100%;
  height: 33%;
}
.rightcenter {
  width: 100%;
  height: 33%;
  padding-top: 10px;
}
.rightbottom {
  width: 100%;
  height: 34%;
  padding-top: 10px;
}
.centertop {
  width: 100%;
  height: 60%;
}
.centerbottom {
  width: 100%;
  height: 40%;
  /* background-color:pink; */
}
.shall {
  width: 100%;
  height: 30%;
  font-size: 18px;
  color: rgb(150, 240, 250);
  text-shadow: 0 0 15px rgb(140, 240, 240);
  padding: 5px;
  padding-left: 10px;
}
.textstyle {
  text-align: left;
  color: rgb(180, 200, 180);
}
.fontstyle {
  font-size: 50px;
  color: rgb(50, 150, 80);
  text-align: center;
}
</style>